<template>
	<view class="container">
		<view class="bookDeatil">
			<view class="bookImage">
				<uv-image radius="0rpx" :customStyle="customStyle3"
					:src="img"
					width="208rpx" height="292rpx"></uv-image>
			</view>
			<view class="detail">
				<p class="ellipsis" style="font-size: 36rpx;">{{getData.bookName}}</p>
				<view class="author">
					<uv-text size="16" text="作者:" color="#86909C"></uv-text>
					<uv-text class="name" size="16" color="#008BFF" :text="getData.author"></uv-text>
				</view>
				<view class="press">
					<uv-text color="#86909C" text="朗读:&nbsp;&nbsp; -"></uv-text>

				</view>

				<view class="publication_time">
					<uv-text class="item" text="章节:" color="#86909C"></uv-text>
					<uv-text class="itemNum" :text="num"></uv-text>
				</view>

			</view>
		</view>
		<view class="read_button">
			<uv-row gutter="12">
				<uv-col span="8">
					<uv-button :custom-style="customStyle" @click="look" size="large" text="播放" type="primary"></uv-button>
				</uv-col>
				<uv-col span="3">
					<uv-button @click="stars" v-if="!data.stars" :custom-style="customStyle2"
						:icon="unstaring" size="large" text="收藏"></uv-button>
					<uv-button v-else @click="stars" :custom-style="customStyle2" :icon="staring"
						size="large" text="已收藏"></uv-button>
				</uv-col>
			</uv-row>
		</view>
		<view class="segmentedControl">
			<uni-segmented-control class="controller" :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#008BFF"></uni-segmented-control>
			<uv-divider class="divider" />
			<view class="content">
				<view v-show="current === 0">
					<view class="introduction">
						<text v-if="getData.briefIntroduction">{{getData.briefIntroduction}}</text>
						<uv-empty v-else  mode="list" text="暂无简介"  icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="list_container">
						<view class="num">共{{num}}集</view>
						<view class="list" v-for="(item,index) in file" :key="index" >
							<view class="title" @click="tiao(index)">{{item.fileName}} </view>
							<view class="mb">
								<image class="file_icon" src="../../../static/文件大小.png"></image>
								<view class="mb_font">
									{{item.type}}
								</view>
								<image class="file_icon2" src="../../../static//播放——音频详情.png"></image>
							</view>
							
							<uv-divider class="divider2" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import useGetGlobalProperties from '@/util/useGlobal.js'
	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	const urlwx = useGetGlobalProperties().$httpUrlWx;
	const staring = urlwx + '/star.png'
	const unstaring = urlwx + '/unstar.png'
	const http = new Request();
	onLoad((option) => {
		if (option.q) {
					let params = decodeURIComponent(option.q)
					let arry = params.split('?');
					let scene = arry[1].split('=');
					getData.value = scene[1];
				}
				if (option.id) {
					console.log(option.id);
					getData.value = option.id;
					console.log(getData.value);
				}
	});
	onMounted(() => {
		init(getData.value)
	});
	const customStyle3 = ref({
			boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
		});
	const getData = ref();
	const num =ref();
	const img = ref();
	const file = ref();
	const resourseId = ref();

	const tiao = (e)=>{
		console.log(e,'--------');
				// uni.setStorageSync('audio',audio)
				// uni.setStorageSync('audioInfo',getData.value)
				uni.setStorageSync('audioIndex',e)
				// console.log('audioInfo',uni.getStorageSync('audio'));
				
				uni.navigateTo({
					url:'/pages/index/playAudio/playAudio'
				})
	}
	const playAudioTO = ()=>{
		
	}
	const look=()=>{
		let code = '';
		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: res => {
				console.log(res, '登录成功')
				code = res.code;
				console.log("code=" + res.code);
				uni.request({
					// url:  'https://weixin.shuzinongyue.com:8942/userInfo/getOpenId/' + code,
					// url:  'http://61.163.243.13:8944/userInfo/getOpenId/' + code,
					url:  'https://wechat.shuzinongyue.com:8922/userInfo/getOpenId/' + code,
					method:'GET',
					success: (res) => {
						if(res.data.data){
							console.log('res.data.look',res.data.data)
							uni.setStorageSync('userInfo',res.data.data);
							uni.setStorageSync('audio',file.value)
							uni.setStorageSync('audioInfo',getData.value)
							uni.setStorageSync('audioIndex',0)
							uni.navigateTo({
								url:'/pages/index/playAudio/playAudio'
							})
							return;
						}else{
							uni.showToast({
								title: '请登录后进行阅读',
								icon: 'success',
								duration: 1500,
								mask: false
							});
							uni.redirectTo({
								// url:'/pages/admin/login'
							})
						}
					}
				})
			}
		})
	}
	const init = (e) => {
		uni.showLoading({
			title:'正在加载中'
		})
		resourseId.value = e;
		// http.get('/ruralLibrary/resource/getProductResourcesDetails/' + e, {}).then(
		http.get('/homepage/' + e, {}).then(
			res => {
				getData.value = res.data.data.data;
				num.value = getData.value.file.length;
			    img.value = getData.value.coverPictures[0].coverPictureUrl;
				file.value = getData.value.file
				uni.setStorageSync('audio',file.value)
				uni.setStorageSync('audioInfo',getData.value)
				console.log('data.vale', getData.value)
				console.log('num.value', file.value)
				uni.hideLoading()
			})
			let user = uni.getStorageSync('userInfo');
		http.get('/wxApi/collect/getCollect/'+user.openId+'/' + e, {}).then(
		// http.get('/wxApi/collect/getCollect/'+'oq1uW6yNXNizxfWzeZY0UgfHmdlc'+'/' + e, {}).then(
			res => {
				console.log('getCollect',res)
				data.stars = res.data==0? false:true;
			})
	}
	const items = ref(['简介', '目录']);
	const current = ref(0);
	const to = () =>{
		uni.navigateTo({
			url:'/pages/index/playAudio/playAudio'
		})
	}
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};
	const list = reactive({
		list: [{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '最美小说文丛 文丛中国 01.mp3',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			}

		],
	})

	const data = reactive({
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		],
		stars: false
	});
	const urls = useGetGlobalProperties().$https;
	const selectObj = ref([]);
	const stars = async() => {
		let user = uni.getStorageSync('userInfo');
		let code = '';
		const book = uni.getStorageSync('audio');
		data.stars = data.stars == false ? true : false;
		if (data.stars == true) {
			uni.showToast({
				title: '收藏成功!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			uni.request({
				url: urls + '/wxApi/collect/add',
				method: 'POST',
				data: {
					openId: user.openId,
					resourceId: resourseId.value,
					dataTypeId:'1719628549662441474'
				},
				success: (res) => {
					console.log('start',res.data)
				}
			})
			return;
		} else if (data.stars == false) {
			uni.showToast({
				title: '已取消收藏!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			selectObj.value.push(resourseId.value);
			const ids = [resourseId.value];
			uni.request({
				url: urls + '/wxApi/collect/remove/'+resourseId.value,
				method: 'GET',
				success: (res) => {
					console.log('start',res.data)
				}
			})
			
		}
	}
	const customStyle = ref({
		height: '95rpx',
		background: '#3c9cff',
		color: '#fff',
		borderRadius: '10rpx',
		boxShadow: "0rpx 4rpx 25rpx 0rpx rgba(0,139,255,0.5)"
	});
	const customStyle2 = ref({
		border: 'none',
		height: '100rpx',
		background: '#F6F7F9',
		color: '#475054',
		borderRadius: '10rpx'
	});
</script>

<style>
	.ellipsis {
		max-width: 55vw;
		height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.title{
		font-size: 32rpx;
	}
	.file_icon2 {
		width: 45rpx;
		height: 45rpx;
		 margin-left: auto;
		  margin-right: 10rpx;
		  margin-top: -16px;
	}

	.list {
		margin-top: 15rpx;
	}

	.mb {
		display: flex;
		color: #86909C;
		margin-top: 5rpx;
		
	}

	.mb_font {
		margin-left: 8rpx;
		font-size: 28rpx;
		margin-top: 3rpx;
	}

	.file_icon {
		width: 30rpx;
		height: 28rpx;
		margin-top: 10rpx;

	}

	.num {
		color: #86909C;
	}

	.list_container {
		padding: 0rpx 52rpx;
		position: relative;
		bottom: 25rpx;

	}

	.introduction {
		padding-top: 15rpx;
		padding-right: 60rpx;
		padding-left: 40rpx;
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
	}

	.controller {
		width: 374rpx;
		height: 84rpx;
		position: relative;
	}

	.segmentedControl {
		margin-top: 48rpx;
	}

	.itemNum {
		position: relative;
		left: 10rpx;
	}

	.item {
		word-break: keep-all;
		/* 添加这行代码 */
	}

	.name {
		word-break: keep-all;
		/* 添加这行代码 */
		position: absolute;
		left: 80rpx;
	}

	.chapter {
		margin-top: 20rpx;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.image-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;
		margin-right: 20rpx;
		/* 		margin-bottom: 5px; */
	}

	.image-text {
		text-align: center;
		margin-top: 6px;
		font-size: 30rpx;
	}

	.like {
		margin-left: 30rpx;
		font-size: 32rpx;
	}

	.divider {
		position: relative;
		bottom: 35rpx;
	}

	.divider2 {
		position: relative;
		bottom: 15rpx;
	}

	.text {
		padding-top: 15rpx;
		padding-right: 60rpx;
		padding-left: 40rpx;
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
	}

	.collect {
		background-color: lawngreen;
		color: black;
	}

	.read_button {
		margin-top: 32rpx;
		margin-left: 30rpx;
	}

	.reading_times {
		display: flex;
		position: relative;
		left: 310rpx;
		bottom: 5rpx;
	}

	.publication_time {
		display: flex;
		align-items: center;
		position: absolute;
		top: 220rpx;
		white-space: nowrap;
		/* 添加这行代码 */
	}

	.press {
		position: relative;
		top: 120rpx;
	}

	.detail {
		position: relative;
		top: 16rpx;
		left: 15rpx;
		padding-right: 50rpx;
	}

	.author {
		display: flex;
		position: absolute;
		top: 60rpx;

	}

	.bookDeatil {
		display: flex;
		/* 使用 Flex 布局 */
		margin-left: 30rpx;
		white-space: nowrap;
		/* 添加这行代码 */
	}

	.bookImage {
		margin-right: 10px;
		/* 可根据需要调整图片和文字之间的间距 */
	}

	.container {
		position: relative;
		top: 100rpx;
		bottom: 200rpx;
		font-family: my-font;

		padding-bottom: 300rpx;
		line-height: 24px;
	}
</style>